/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React, { useMemo, useState, useEffect } from 'react';
import { Modal, Button, Row, Col, Spin } from 'antd';
import order_template from '@/assets/order_template.png';
import pick_up_code from '@/assets/pick_up_code.png';
import QRCode from 'qrcode.react';
import { previewAdv } from '@/services/operatorManagement';
import type { AdvTableListItem } from '../types/Advertisements';
import styles from './PreviewTemplate.less';

interface PreviewTemplateInterface {
  type: 'orderSheet' | 'pickUpCode';
  key: any;
  children: React.ReactNode;
  onPreview: () => Promise<any>;
}

const templatePci = {
  orderSheet: order_template,
  pickUpCode: pick_up_code,
};

const PreviewTemplate: React.FC<PreviewTemplateInterface> = ({ type, children, onPreview }) => {
  const [visible, setVisible] = useState<boolean>(false);
  const [record, setRecord] = useState<AdvTableListItem>({});
  const [imgsrc, setImgsrc] = useState<string>('');
  const [loading, setLoading] = useState(false);

  const onClick = () => {
    onPreview()
      .then((res) => {
        delete res.type;
        setRecord(res);
        setVisible(true);
      })
      .catch();
  };

  useEffect(() => {
    if (visible) {
      if (type == 'pickUpCode') {
        setImgsrc(record.ad_area_img);
      } else {
        setLoading(true);
        previewAdv(record)
          .then((res) => {
            if (res.code == 0) {
              setImgsrc(res.data);
            }
            setLoading(false);
          })
          .catch(() => {
            setLoading(false);
          });
      }
    } else {
      setImgsrc('');
    }
  }, [record, visible, type]);

  const ModalContent = useMemo(
    () => () =>
      (
        <div className={styles.imgWrapper}>
          {type === 'orderSheet' ? (
            <img src={imgsrc} />
          ) : (
            <>
              <img src={templatePci[type]} />
              <div className={styles.codeContent}>
                <Row justify='space-around' align='middle'>
                  <Col flex='1'>
                    <img src={imgsrc} style={{ height: 120 }} />
                  </Col>
                  <Col>
                    <Row className={styles.qrcode}>
                      <Col>
                        {record.ad_area_url && <QRCode value={record.ad_area_url} size={120} />}
                      </Col>
                    </Row>
                  </Col>
                </Row>
              </div>
            </>
          )}
        </div>
      ),
    [type, record, imgsrc],
  );

  return (
    <>
      <Button onClick={onClick}>{children}</Button>
      <Modal
        className={styles.modal}
        width='auto'
        centered
        footer={null}
        closable={false}
        visible={visible}
        destroyOnClose
        onCancel={() => setVisible(false)}
      >
        <Spin spinning={loading}>
          {loading ? (
            <div style={{ width: 200, height: 200, backgroundColor: 'gray' }} />
          ) : (
            <ModalContent />
          )}
        </Spin>
      </Modal>
    </>
  );
};

export default React.memo(PreviewTemplate);
